<template>
	<div class="userAlloction">
		<!-- 左侧列表数据 -->
		<div class="userAlloction-left">
			<h4>角色列表</h4>
			<div class="searchBar">
				<el-input
					v-model="roleTypeSearch"
					placeholder="请输入角色"
					size="mini"
					clearable
					style="width: 60%"
				>
					<el-button
						slot="append"
						icon="el-icon-search"
						@click="userSearch"
					></el-button>
				</el-input>
			</div>
			<div class="type-list" style="overflow-y: auto">
				<el-scrollbar ref="scrollContainer" class="scroll-container">
					<shyt-table
						ref="menuTableS"
						:columns="roleColumns"
						:data="roleTableData"
						:auto-resize="true"
						:keep-source="true"
						:tree-config="treeConfig"
						:edit-config="{
							trigger: 'dblclick',
							mode: 'row',
							showStatus: true,
						}"
						highlight-hover-row
						highlight-current-row
						@cell-click="roleClick"
					>
					</shyt-table>
				</el-scrollbar>
			</div>
		</div>

		<!-- 用户列表 -->
		<div class="userAlloction-center">
			<h4>已选</h4>
			<div class="searchBar">
				<el-input
					v-model="userTypeSearch"
					placeholder="请输入用户名称"
					size="mini"
					clearable
					style="width: 60%"
				>
					<el-button
						slot="append"
						icon="el-icon-search"
						:disabled="userList == '' || userList == null ? true : false"
						@click="queryClick"
					></el-button
				></el-input>
			</div>
			<div style="margin-bottom: 10px">
				<el-button
					class="removeBtn"
					:disabled="
						userTopTableData.length == 0 || removeList.length == 0
							? true
							: false
					"
					@click="removeBtn"
					>移除</el-button
				>
				<el-button
					class="addBtn"
					:disabled="userListId == '' || userListId == null ? true : false"
					@click="addBtn"
					>添加</el-button
				>
			</div>
			<div class="dist-list">
				<div
					class="scroll-container"
					style="height: calc(100% - 26px - 28px); overflow-y: auto"
				>
					<el-scrollbar ref="scrollContainer">
						<el-table
							ref="multipleTable"
							:data="userTopTableData"
							border
							row-key="id"
							:header-cell-style="{ background: '#eef1f6', color: '#606266' }"
							highlight-current-row
							@selection-change="removeHandleSelectionChange"
							@row-click="lineClick"
						>
							<el-table-column type="selection" width="55"></el-table-column>
							<el-table-column
								prop="userRealName"
								label="名称"
							></el-table-column>
							<el-table-column
								prop="userAccount"
								label="账号"
							></el-table-column>
							<el-table-column
								prop="orgDictDto.orgName"
								label="机构名称"
							></el-table-column>
						</el-table>
					</el-scrollbar>
				</div>
			</div>
		</div>
		<!-- 右侧数据 -->
		<div class="userAlloction-right">
			<h4>菜单列表</h4>
			<div class="searchBar">
				<el-input
					v-model="menuTypeSearch"
					placeholder="请输入菜单名称"
					size="mini"
					clearable
					style="width: 60%"
				>
					<el-button
						slot="append"
						icon="el-icon-search"
						:disabled="userList == '' || userList == null ? true : false"
						@click="menuQuery"
					></el-button
				></el-input>
			</div>
			<div class="type-list" style="overflow-y: auto">
				<el-scrollbar ref="scrollContainer" class="scroll-container">
					<el-button
						type="primary"
						:disabled="
							userList == '' || userList == null || getMenuList.length == 0
								? true
								: false
						"
						@click="menuList"
						>保存</el-button
					>
					<shyt-table
						ref="menuTable"
						resizable
						row-id="id"
						:data="menuTableData"
						:columns="menuColumns"
						:tree-config="{ children: 'children' }"
						:checkbox-config="{
							checkRowKeys: checkRowKeys,
							expandAll: true,
							showHeader: false,
						}"
						@checkbox-change="selectChangeEvent"
					>
					</shyt-table>
				</el-scrollbar>
			</div>
		</div>
		<el-dialog
			title="待分配用户"
			:visible.sync="dialogTableVisible"
			:close-on-click-modal="false"
		>
			<shyt-table
				v-loading="loading"
				:columns="userListColumns"
				:data="userData"
				border
				:header-cell-style="{ background: '#eef1f6', color: '#606266' }"
				height="300"
				@checkbox-change="addHandleSelectionChange"
				@checkbox-all="addHandleSelectionChange"
			>
				<template #userName="{ row }">
					<span>{{ row.orgDictDto ? row.orgDictDto.orgName : '-' }}</span>
				</template>
			</shyt-table>
			<div style="margin-top: 8px">
				<el-button
					type="primary"
					size="small"
					:disabled="stayAdd.length == 0 ? true : false"
					@click="saveClick"
					>保存</el-button
				>
				<el-button size="small" @click="cancelClick">取消</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import {
	roleTreeData,
	userGetRoleUserList,
	userGetUncheckedList,
	userUpdateRoleUsers,
	userDeleteRoleUsers,
	getGetList,
	getInsert,
	getCheckedMenuList,
} from '@/http/api.js'
export default {
	name: 'UserAllocation',
	data() {
		return {
			menuTable: null,
			menuTableS: null,
			leftContent: null,
			loading: true,
			scrollContainer: null,
			dialogTableVisible: false,

			// 角色列表数据
			roleTableData: [],
			// 用户列表数据
			userTopTableData: [],
			userData: [],

			// 菜单列表数据
			menuTableData: [],
			roleTypeSearch: '', //角色列表
			userTypeSearch: '', //已分配用户
			menuTypeSearch: '', //菜单列表
			userAllocation: '', //待分配
			//角色列表
			roleColumns: [
				{
					field: 'roleName',
					title: '角色列表',
					treeNode: true,
				},
			],
			menuColumns: [
				{
					type: 'checkbox',
					width: '50',
				},
				{
					field: 'menuName',
					title: '菜单名称',
					treeNode: true,
				},
			],
			// 用户列表
			userColumns: [
				{
					field: 'name',
					title: '用户列表',
					treeNode: true,
				},
			],
			userListColumns: [
				{
					type: 'checkbox',
					width: '50',
				},
				{
					field: 'userRealName',
					title: '名称',
				},
				{
					field: 'userAccount',
					title: '账号',
				},
				{
					field: 'userName',
					title: '机构名称',
					slots: { default: 'userName' },
				},
			],
			treeConfig: {
				children: 'children',
				expandAll: true,
			},
			height: null,
			removeList: [],
			allocated: [],
			stayAdd: [],
			userListId: '',
			removeListId: '',
			userAddId: '',
			centerListId: {},
			getMenuList: [],
			userRoleId: '',
			pitchId: [],
			checkRowKeys: [],
			saveRole: '',
			saveUser: '',
			userList: '',
			menuListId: null,
			// orgName: '',
		}
	},
	created() {
		this.roleDataList()
		this.getGetListData()
		console.log(this.userTopTableData)
	},
	mounted() {
		this.menuTable = this.$refs.menuTable.$refs.xTable
		this.menuTableS = this.$refs.menuTableS.$refs.xTable
	},
	methods: {
		menuCheckMethod({ row }) {
			if (this.pitchId.find(i => i == row.id)) {
				return true
			} else {
				return false
			}
		},
		// tableRowClassName(row, index) {
		// 	row.row.index = row.rowIndex++
		// },
		fn(rows) {
			if (rows) {
				rows.forEach(row => {
					this.$refs.multipleTable.toggleRowSelection(row, true)
				})
			}
		},
		// 移除
		removeBtn() {
			let roleUuid = {
				roleUuid: this.userListId,
				userUuid: this.removeList
					.map(i => i.id)
					.filter(i => i)
					.join(','),
			}
			// console.log(roleUuid)
			userDeleteRoleUsers(roleUuid).then(({ data }) => {
				// console.log(data)i
				if (data?.head?.code == 200) {
					this.$message.success('移除成功')
					this.GetRoleUserList(this.userListId)
				}
			})
		},
		// 角色列表搜索
		userSearch() {
			let userRealName = {
				roleNameOrInputCode: this.roleTypeSearch.toUpperCase(),
			}
			roleTreeData(userRealName).then(({ data }) => {
				if (data.head.code == 200) {
					this.roleTableData = data.data
					this.$nextTick(() => {
						this.menuTableS.setAllTreeExpand(true)
					})
				}
			})
		},
		// 用户列表搜索
		queryClick() {
			let userQueryClick = {
				userRealNameOrInputCode: this.userTypeSearch.toUpperCase(),
				roleUuid: this.userList,
			}
			userGetRoleUserList(userQueryClick).then(({ data }) => {
				this.userTopTableData = data.data
				console.log(this.userTopTableData)
			})
		},
		// 菜单列表搜索
		menuQuery() {
			// let menuQuery = {
			// 	menuNameOrInputCode: this.menuTypeSearch.toUpperCase(),
			// }
			let ruUuidList = { userUuid: this.saveUser, roleUuid: this.userList }
			if (ruUuidList.userUuid == '') {
				this.menuListId = {
					roleUuid: this.userList,
					menuNameOrInputCode: this.menuTypeSearch.toUpperCase(),
				}
			} else {
				this.menuListId = {
					userUuid: this.saveUser,
					roleUuid: this.userList,
					menuNameOrInputCode: this.menuTypeSearch.toUpperCase(),
				}
			}
			console.log(this.saveUser, '-----', this.userList, '角色')
			getCheckedMenuList(this.menuListId).then(({ data }) => {
				console.log(data)
				if (data.head.code == 200) {
					console.log(data)
					this.menuTableData = data.data.template

					if (data.data.result != null) {
						let treeDataLists = data.data.result
							.map(i => (i.children == null ? i.id : i.children))
							.flat(1)

						console.log(treeDataLists, 'aaaaa')
						this.checkRowKeys = treeDataLists.map(i =>
							i.id == undefined ? i : i.id,
						)
						this.menuTable.reloadData(this.menuTableData)
					}
					this.$nextTick(() => {
						this.menuTable.setAllTreeExpand(true)
					})
				}
			})
			// getGetList(menuQuery).then(({ data }) => {
			// 	if (data.head.code == 200) {
			// 		this.menuTableData = data.data
			// 		this.$nextTick(() => {
			// 			this.menuTable.setAllTreeExpand(true)
			// 		})
			// 	}
			// })
		},
		// 菜单列表
		getGetListData() {
			getGetList({}).then(({ data }) => {
				this.menuTableData = data.data
				this.$nextTick(() => {
					this.menuTable.setAllTreeExpand(true)
				})
			})
		},
		removeHandleSelectionChange(val) {
			this.removeList = val
		},
		//添加弹框
		addBtn() {
			let arr = this.userTopTableData
				.map(i => {
					return i.id
				})
				.filter(i => i)
			let str = arr.length ? arr.join(',') : ''
			this.centerListId = this.userAddId
			this.dialogTableVisible = true
			let addObj = {
				userUuid: str,
				roleUuid: this.userListId,
			}

			userGetUncheckedList(addObj).then(({ data }) => {
				if (data.head.code == 200) {
					this.userData = data.data
					this.loading = false
				}
				// this.userListId = ''
			})
		},
		changefn() {},
		// 角色列表数据
		roleDataList() {
			roleTreeData({}).then(({ data }) => {
				this.roleTableData = data.data
				console.log(this.roleTableData)
			})
		},
		//已选数据
		// 当前角色对应数据
		GetRoleUserList(roleUuid) {
			userGetRoleUserList({ roleUuid }).then(({ data }) => {
				this.userTopTableData = data.data
				// this.orgName =
				// data.data.orgDictDto.map(i => {
				// 	console.log(i)
				// })
				console.log(data.data, '1dsa1d31as3sad1d21as123')
			})
		},

		// 角色点击
		roleClick({ row }) {
			this.saveUser = ''
			// console.log(row)
			this.userListId = row.id
			//  点击用户时重新将角色的this.userRoleId赋值为用户的id
			this.userRoleId = row.id
			// this.saveRole = row.id
			this.userList = row.id
			let ruUuidList = { roleUuid: row.id, ruUuid: '' }
			getCheckedMenuList(ruUuidList).then(({ data }) => {
				this.menuTableData = data.data.template
				// console.log(data.data, 'data.data.result')
				if (data.data.result != null) {
					let treeDataLists = data.data.result
						.map(i => (i.children == null ? i.id : i.children))
						.flat(1)

					// console.log(treeDataLists, 'aaaaa')
					this.checkRowKeys = treeDataLists.map(i =>
						i.id == undefined ? i : i.id,
					)
					this.menuTable.reloadData(this.menuTableData)
				}
				// }
				this.$nextTick(() => {
					this.menuTable.setAllTreeExpand(true)
				})
			})
			this.GetRoleUserList(row.id)
			// this.getGetListData()
		},
		// 获取菜单列表多选选中的
		selectChangeEvent({ records }) {
			console.log(records)
			this.getMenuList = records
		},
		// 确认
		saveClick() {
			let roleUuid = { roleUuid: this.userListId }
			let userIds = this.userTopTableData
				.map(i => i.id)
				.filter(i => i)
				.join(',')
			let addUserIds = this.stayAdd
				.map(i => i.id)
				.filter(i => i)
				.join(',')
			let centerListId = userIds ? userIds + ',' + addUserIds : addUserIds
			let stayObj = {
				userUuid: centerListId,
				roleUuid: this.userListId,
			}
			// let userObj = { userUuid: this.userListId }
			userUpdateRoleUsers(stayObj).then(({ data }) => {
				if (data.head.code == 200) {
					this.$message({
						message: '保存成功',
						type: 'success',
					})
					this.dialogTableVisible = false
					userGetRoleUserList(roleUuid).then(({ data }) => {
						this.userTopTableData = data.data
					})
					console.log(data)
				}
			})
		},
		// 取消
		cancelClick() {
			this.dialogTableVisible = false
			// this.userListId = ''
		},
		addHandleSelectionChange({ records }) {
			this.stayAdd = records
		},
		// 菜单列表保存
		menuList() {
			let menuList = this.getMenuList
				.map(i => i.id)
				.filter(i => i)
				.join(',')

			let treeDataId = menuList
			// console.log(treeId, '获取半选true')
			let menuObj = {
				userUuid: this.saveUser,
				menuUuid: treeDataId,
				ruUuid: this.userList,
			}
			if (menuObj.userUuid == '') {
				menuObj = {
					menuUuid: treeDataId,
					ruUuid: this.userList,
				}
			} else {
				menuObj = {
					userUuid: this.saveUser,
					menuUuid: treeDataId,
					ruUuid: this.userList,
				}
			}
			console.log(menuObj, '测试')
			getInsert(menuObj).then(({ data }) => {
				if (data.head.code == 200) {
					this.$message({
						message: '保存成功',
						type: 'success',
					})
					this.getMenuList = ''
				}
			})
		},

		// 点击已选用户获取当前点击的行
		lineClick(row) {
			this.$refs.multipleTable.toggleRowSelection(row)
			this.saveUser = row.id
			this.userRoleId = row.id
			let ruUuidList = { userUuid: row.id, roleUuid: this.userList }
			getCheckedMenuList(ruUuidList).then(({ data }) => {
				console.log(data.data)
				this.menuTableData =
					data.data.template == null ? [] : data.data.template
				if (data.data.result != null) {
					let treeDataLists = data.data.result
						.map(i => (i.children == null ? i.id : i.children))
						.flat(1)

					console.log(treeDataLists, 'aaaaa')
					this.checkRowKeys = treeDataLists.map(i =>
						i.id == undefined ? i : i.id,
					)
					this.menuTable.reloadData(this.menuTableData)
				}

				this.$nextTick(() => {
					this.menuTable.setAllTreeExpand(true)
				})
			})
		},
		allocationBtn(row) {
			console.log(row)
		},
	},
}
</script>

<style lang="scss" scoped>
.userAlloction {
	height: 100%;
	display: flex;
	// 左侧
	.userAlloction-left {
		border-right: 1px solid #ccc;
		padding: 10px;
		box-sizing: border-box;

		width: 35%;
		h4 {
			padding: 0px;
			margin: 0 0 10px 0;
		}
		.searchBar {
			display: flex;
			justify-content: space-between;
		}
		.type-list {
			height: calc(100% - 22px - 28px);
			padding-top: 20px;
			box-sizing: border-box;
			.item-active {
				background: #ecf5ff;
			}
			.type-list-item {
				height: 40px;
				padding: 0 15px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1px solid #e4e7ed;
				box-sizing: border-box;
				transition: all 0.3s;
				&:first-child {
					border-top: 1px solid #e4e7ed;
				}
				&:hover {
					background: #e4e7ed;
				}
			}
			.type-list-none {
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 20px;
				font-weight: 500;
				color: #909399;
			}
		}
	}
	// 中间
	.userAlloction-center {
		flex: 1;
		padding: 10px;
		box-sizing: border-box;
		box-align: border-box;
		h4 {
			padding: 0px;
			margin: 0 0 10px 0;
		}
		.searchBar {
			display: flex;
			justify-content: space-between;
		}
		.dist-list {
			box-sizing: border-box;
			height: calc(100% - 77px - 28px);
		}
	}
	// 右侧
	.userAlloction-right {
		border-left: 1px solid #ccc;
		padding: 10px;
		box-sizing: border-box;

		width: 35%;
		h4 {
			padding: 0px;
			margin: 0 0 10px 0;
		}
		.searchBar {
			display: flex;
			justify-content: space-between;
		}
		.type-list {
			height: calc(100% - 22px - 28px);
			padding-top: 20px;
			box-sizing: border-box;
			.item-active {
				background: #ecf5ff;
			}
			.type-list-item {
				height: 40px;
				padding: 0 15px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1px solid #e4e7ed;
				box-sizing: border-box;
				transition: all 0.3s;
				&:first-child {
					border-top: 1px solid #e4e7ed;
				}
				&:hover {
					background: #e4e7ed;
				}
			}
			.type-list-none {
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 20px;
				font-weight: 500;
				color: #909399;
			}
		}
	}
}
::-webkit-scrollbar {
	display: none;
}
</style>
